import Taro, { Component, Config } from '@tarojs/taro'
import { View, ScrollView } from '@tarojs/components'
import './index.less'
import { getHeadHeight } from '../../utils/sevice'

interface IProps {
  state?: number
  showMoreLoading?: boolean
  count?: number
  baseHeight?: number
  autoHeight?: number
  offset?: number
  bottomOffset?: number
  enableTips?: boolean
  marginOffset?: number
  enableRefresh?: boolean
  scrollY?: boolean
  onRetry?: () => void
  onScroll?: () => any
  onScrolltolower?: () => void
  onRefresh?: () => void
}

interface IState {
  margin: number
  beginY: number
  top: number
  showLoading: boolean
  triggered: boolean
  isLoading: boolean
  transition: string
}
export default class Index extends Component<IProps, IState> {
  state: IState = {
    margin: 0,
    beginY: 0,
    top: -100,
    showLoading: false,
    triggered: false,
    isLoading: false,
    transition: 'none',
    flag: true
  }
  //   static getDerivedStateFromProps(nextProps, prevState) {
  //     const { selectedIndex } = nextProps;
  //     if (selectedIndex !== prevState.selectedIndex) {
  //         return {
  //           selectedIndex: selectedIndex,
  //           left: selectedIndex * (100 + 19) + 51
  //         }
  //     }
  //     return null;
  //   }
  componentDidMount() {}
  componentWillUnmount() {}

  componentDidShow() {}

  componentDidHide() {}
  onRetry = () => {
    this.props.onRetry()
    // this.$emit('retry')
  }
  hideRefresh = () => {
    this.setState({
      top: 10,
      isLoading: false,
      margin: 0
      // scrollY: true
    })
    setTimeout(() => {
      this.setState({
        showLoading: false
      })
    }, 200)
    setTimeout(() => {
      this.setState({
        top: -100
      })
    }, 2000)
  }
  onScroll = (e) => {
    // console.log(e)
    if (this.props.onScroll) {
      this.props.onScroll(e.detail)
    }
    // this.$emit('scroll', e.$wx.detail)
  }
  onScrolltolower = () => {
    this.props.onScrolltolower()
    // this.$emit('scrolltolower')
  }
  onRefresherrefresh = () => {
    this.setState({
      triggered: true
    })
    this.props.onRefresh()
    // this.$emit('refresh')
    setTimeout(() => {
      this.setState({
        triggered: false
      })
    }, 2000)
  }
  onRefresherrestore = () => {
    this.setState({
      triggered: true
    })
  }
  config: Config = {
    usingComponents: {
      loading: '../loading/loading'
    }
  }
  render() {
    const {
      baseHeight,
      bottomOffset,
      offset,
      autoHeight,
      scrollY,
      showMoreLoading,
      count,
      state,
      enableTips
    } = this.props
    // console.log(this.props)
    const { showLoading, margin, transition, triggered, top, flag } = this.state
    return (
      <View
        className="page"
        style={{
          height: autoHeight ? 'auto' : `calc(${baseHeight} - ${offset}px - ${bottomOffset}rpx)`
        }}
      >
        {state === 0 ? (
          <View className="page-init">
            <loading extclassName="page-loading" show={flag} />
          </View>
        ) : null}
        {state === 1 ? (
          <View className="page-error">
            <View className="des">加载失败</View>
            <View className="btn" hover-className="btn-hover" onClick={this.onRetry}>
              点击重试
            </View>
          </View>
        ) : null}
        {state === 2 ? (
          <View className="page-empty">
            <slot name="empty" />
          </View>
        ) : null}
        {state > 2 ? (
          <View className="page-content">
            <ScrollView
              scrollY={!showLoading && scrollY}
              refresherEnabled={flag}
              refresherTriggered={triggered}
              onScroll={this.onScroll}
              onRefresherRefresh={this.onRefresherrefresh}
              onRefresherRestore={this.onRefresherrestore}
              onScrollToLower={this.onScrolltolower}
              className="content"
            >
              <View style={{ margin: `${margin}px 0px,transition: ${transition}` }}>
                <loading show={showLoading} />
              </View>
              <slot />
              <loading show={showMoreLoading} type="circle" />
            </ScrollView>
            {enableTips ? (
              <block>
                {count ? (
                  <View className="tips" style={{ top: `${top}rpx;` }}>
                    为你选出{count}条好内容
                  </View>
                ) : (
                  <View className="tips" style={{ top: `${top}rpx;` }}>
                    暂时没有更好的内容
                  </View>
                )}
              </block>
            ) : null}
          </View>
        ) : null}
      </View>
    )
  }
}
Index.defaultProps = {
  state: 0,
  showMoreLoading: true,
  count: 0,
  baseHeight: '100vh',
  autoHeight: false,
  offset: getHeadHeight(),
  bottomOffset: 0,
  enableTips: true,
  marginOffset: 10,
  enableRefresh: false,
  scrollY: true
}
